import React, { useEffect, useRef, useState } from 'react';
import WangEditor from 'wangeditor';
import { message } from 'antd';
import './scss/EditorV4.scss'

function MyEditor(props) {
    const {
        value,
        getHtmlContent,
        sendPrivateMessage,
        isClear,
        reEditText,
        isReEdit,
        setIsReEdit,

    } = props
    const editorRef = useRef(null);
    const [editor, setEditor] = useState(null);
    let content = [
        {
            alt: '[/:呲牙]',
            src: require('./images/png/ee_000.png'),
        },
        {
            alt: '[/:调皮]',
            src: require('./images/png/ee_001.png'),
        },
        {
            alt: '[/:流汗]',
            src: require('./images/png/ee_002.png'),
        },
        {
            alt: '[/:偷笑]',
            src: require('./images/png/ee_003.png'),
        },
        {
            alt: '[/:再见]',
            src: require('./images/png/ee_004.png'),
        },
        {
            alt: '[/:敲打]',
            src: require('./images/png/ee_005.png'),
        },
        {
            alt: '[/:擦汗]',
            src: require('./images/png/ee_006.png'),
        },
        {
            alt: '[/:大哭]',
            src: require('./images/png/ee_007.png'),
        },
        {
            alt: '[/:流泪]',
            src: require('./images/png/ee_008.png'),
        },
        {
            alt: '[/:嘘]',
            src: require('./images/png/ee_009.png'),
        },
        {
            alt: '[/:酷]',
            src: require('./images/png/ee_010.png'),
        },
        {
            alt: '[/:抓狂]',
            src: require('./images/png/ee_011.png'),
        },
        {
            alt: '[/:委屈]',
            src: require('./images/png/ee_012.png'),
        },
        {
            alt: '[/:便便]',
            src: require('./images/png/ee_013.png'),
        },
        {
            alt: '[/:菜刀]',
            src: require('./images/png/ee_014.png'),
        },
        {
            alt: '[/:可爱]',
            src: require('./images/png/ee_015.png'),
        },
        {
            alt: '[/:色]',
            src: require('./images/png/ee_016.png'),
        },
        {
            alt: '[/:害羞]',
            src: require('./images/png/ee_017.png'),
        }, {
            alt: '[/:得意]',
            src: require('./images/png/ee_018.png'),
        },
        {
            alt: '[/:吐]',
            src: require('./images/png/ee_019.png'),
        },
        {
            alt: '[/:微笑]',
            src: require('./images/png/ee_020.png'),
        },
        {
            alt: '[/:发怒]',
            src: require('./images/png/ee_021.png'),
        },
        {
            alt: '[/:尴尬]',
            src: require('./images/png/ee_022.png'),
        },
        {
            alt: '[/:惊恐]',
            src: require('./images/png/ee_023.png'),
        },
        {
            alt: '[/:冷汗]',
            src: require('./images/png/ee_024.png'),
        },
        {
            alt: '[/:白眼]',
            src: require('./images/png/ee_025.png'),
        },
        {
            alt: '[/:傲慢]',
            src: require('./images/png/ee_026.png'),
        },
        {
            alt: '[/:惊讶]',
            src: require('./images/png/ee_027.png'),
        },
        {
            alt: '[/:疑问]',
            src: require('./images/png/ee_028.png'),
        },
        {
            alt: '[/:睡觉]',
            src: require('./images/png/ee_029.png'),
        },
        {
            alt: '[/:亲亲]',
            src: require('./images/png/ee_030.png'),
        },
        {
            alt: '[/:憨笑]',
            src: require('./images/png/ee_031.png'),
        },
        {
            alt: '[/:撇嘴]',
            src: require('./images/png/ee_032.png'),
        },
        {
            alt: '[/:阴险]',
            src: require('./images/png/ee_033.png'),
        },
        {
            alt: '[/:奋斗]',
            src: require('./images/png/ee_034.png'),
        },
        {
            alt: '[/:发呆]',
            src: require('./images/png/ee_035.png'),
        },
        {
            alt: '[/:哈欠]',
            src: require('./images/png/ee_036.png'),
        },
        {
            alt: '[/:拥抱]',
            src: require('./images/png/ee_037.png'),
        },
        {
            alt: '[/:坏笑]',
            src: require('./images/png/ee_038.png'),
        },
        {
            alt: '[/:鼓掌]',
            src: require('./images/png/ee_039.png'),
        },
        {
            alt: '[/:鄙视]',
            src: require('./images/png/ee_040.png'),
        },
        {
            alt: '[/:晕]',
            src: require('./images/png/ee_041.png'),
        },
        {
            alt: '[/:大兵]',
            src: require('./images/png/ee_042.png'),
        },
        {
            alt: '[/:可怜]',
            src: require('./images/png/ee_043.png'),
        },
        {
            alt: '[/:强]',
            src: require('./images/png/ee_044.png'),
        },
        {
            alt: '[/:弱]',
            src: require('./images/png/ee_045.png'),
        },
        {
            alt: '[/:握手]',
            src: require('./images/png/ee_046.png'),
        },
        {
            alt: '[/:胜利]',
            src: require('./images/png/ee_047.png'),
        }, {
            alt: '[/:抱拳]',
            src: require('./images/png/ee_048.png'),
        },
        {
            alt: '[/:心碎]',
            src: require('./images/png/ee_049.png'),
        },
        {
            alt: '[/:吓]',
            src: require('./images/png/ee_050.png'),
        },
        {
            alt: '[/:饥饿]',
            src: require('./images/png/ee_051.png'),
        },
        {
            alt: '[/:困]',
            src: require('./images/png/ee_052.png'),
        },
        {
            alt: '[/:咒骂]',
            src: require('./images/png/ee_053.png'),
        },
        {
            alt: '[/:折磨]',
            src: require('./images/png/ee_054.png'),
        },
        {
            alt: '[/:抠鼻]',
            src: require('./images/png/ee_055.png'),
        },
        {
            alt: '[/:糗大了]',
            src: require('./images/png/ee_056.png'),
        },
        {
            alt: '[/:左哼哼]',
            src: require('./images/png/ee_057.png'),
        },
        {
            alt: '[/:右哼哼]',
            src: require('./images/png/ee_058.png'),
        },
        {
            alt: '[/:快哭了]',
            src: require('./images/png/ee_059.png'),
        },

    ];


    useEffect(() => {
        let editor = new WangEditor(editorRef.current);
        setEditor(editor);
        // 监听 keydown 事件
        editor.txt.eventHooks.keydownEvents.push((e) => {
            // 检查是否按下了 Shift 键和 Enter 键
            if (e.ctrlKey && e.keyCode === 13) {
                // 阻止默认行为（换行）
                e.preventDefault();
                handleDebouncedEnter(editor);
            }
            else if (!e.ctrlKey && e.keyCode === 13) {
                // 阻止默认行为（换行）
                e.preventDefault();
                console.log('发送');
                let sendText = getEditorContent();
                console.log('sendText', sendText);
                sendPrivateMessage();
                clearEditor();
            }
            if (editor) {//获取内容长度
                const contentLength = editor.txt.text().length;
                // console.log('内容长度：', contentLength);
            }
            //将富文本内容传出
            // let nowText = getEditorContent();
            // console.log('nowText',nowText);
            // getHtmlContent(nowText);
        });

        // editor.txt.eventHooks.keyupEvents.push((e) => {
        //     //将富文本内容传出
        //     let nowText = getEditorContent();
        //     getHtmlContent(nowText);
        // });

        // 配置编辑器
        editor.config.menus = [
            'emoticon',  // 只显示表情菜单
        ];
        editor.config.emotions = [
            {
                title: '表情包', // tab 的标题
                type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
                content: content
            },
        ]
        editor.config.zIndex = 8
        editor.config.height = 129;
        editor.config.placeholder = '请输入消息…'
        editor.config.pasteIgnoreImg = false
        editor.config.pasteFilterStyle = false;
        editor.config.onchange = (newHtml) => {
            getHtmlContent(newHtml);//传出富文本内容
            restrictLength(editor);//计算长度
        };

        editor.create();

        // 其他配置和操作...

        // 清除编辑器内容
        const clearEditor = () => {
            editor.txt.clear();
        };

        // 获取编辑器的 HTML 内容
        const getEditorContent = () => {
            return editor.txt.html();
        };
        // 在组件卸载时销毁编辑器
        return () => {
            editor.destroy();
        };
    }, []);

    useEffect(() => {
        if (editor && isClear) {//发布后，清空内容
            editor.txt.clear();
        }
    }, [isClear, editor])

    useEffect(() => {
        if (reEditText && editor && isReEdit) {//发布后，清空内容
            editor.txt.html(reEditText);
            setTimeout(() => {
                setIsReEdit();
            }, 200);
        }
    }, [reEditText, editor, isReEdit,setIsReEdit])

    function handleDebouncedEnter(editor) {
        let text = editor.txt.html()
        text += "<p><br/></p>";
        // 清除之前的定时器
        editor.txt.html(text) // 重新设置编辑器内容
        console.log('text', editor.txt.html());
    }

    function restrictLength(editor) {
        // 获取内容长度
        let text = editor.txt.text();
        let contentLength = text.length;
        // console.log(editor.txt.text(), '内容长度：', contentLength);
        if (contentLength > 5000) {
            // 截取当前长度的5000个字符
            message.warn('不能超过5000字符！')
            text = text.substring(0, 5000);
            editor.txt.text(text);
        }
    }

    return (
        <div>
            <div ref={editorRef} className="editor1" ></div>
            {/* 其他组件内容 */}
        </div>
    );
}

export default MyEditor;
